<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">
                    宅基地项目
                </div>
                <ul class="ha">
                    <li>
                        <el-dropdown class="userInfo">
    <span class="el-dropdown-link">
      <i><img :src="loginInfo.pton"></i>
<!--        <span class="haha" v-if="loginInfo.roleId === 1|| 2">{{loginInfo.userName}}</span>-->
                <span class="haha" v-if="loginInfo.cname!==null">{{loginInfo.cname}}</span>
      <i class="haha" v-if="loginInfo.userName!==null">{{loginInfo.userName}}</i>
<!--        <span class="haha" v-if="loginInfo.roleId ===8">{{loginInfo.cname}}</span>-->
  </span>
                            <el-dropdown-menu slot="dropdown" >
<!--                                v-if="loginInfo.role === 1"-->
                                <el-dropdown-item >个人中心</el-dropdown-item>
                                <a href="/#/page/settings"> <el-dropdown-item>设置</el-dropdown-item></a>
                                <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li>
                        <i class="el-icon-s-home"></i>
                    </li>
                    <li>
                        <el-dropdown>
                        <el-badge :value=countAll class="item" type="warning">
                            <i  class="el-icon-message-solid"></i>
                        </el-badge>
                            <el-dropdown-menu slot="dropdown" v-if="loginInfo.role !== 8">
                                <el-dropdown-item >建房申请({{countBuilding}})</el-dropdown-item>
                                <el-dropdown-item>出租申请({{leaseCount}})</el-dropdown-item>
                                <el-dropdown-item>转让申请({{transferCount}})</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li>
                        <i class="el-icon-switch-button" @click="quit"></i>
                    </li>
                </ul>
            </el-header>
            <el-container>
                <el-aside width="200px">
<!--                    启用router，会使用index来进行路由跳转-->
                    <el-menu router unique-opened>
                    <el-submenu :index="index+''"
                                v-for="(item,index) in routes"
                                :key="index" v-if="!item.hidden">
                        <template slot="title">
                            <i :class="item.icon" style="color: chartreuse;margin-right: 7px"></i>
                            {{item.name}}
                        </template>
                            <el-menu-item
                                    :index="children.path"
                                    v-for="(children,indexj) in item.children"
                                    :key="indexj">
                                {{children.name}}
                            </el-menu-item>
                    </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                token11:'',
                loginInfo:{},
                countBuilding:'',
                transferCount:'',
                leaseCount:'',
                countAll:''
            }
        },
        created(){
            this.showUser();
            this.count()
            this.count1()
        },
        computed:{
          routes(){
              //从vuex中拿到routes;
              return this.$store.state.routes;
          }
        },

        methods:{
            quit(){
                //this.$store.state.routes=[],

                     window.sessionStorage.removeItem('tokenStr'),
                    window.sessionStorage.removeItem('tokenUser'),
                    window.sessionStorage.removeItem('token'),
                    window.sessionStorage.removeItem('tokenCust'),
                        this.$router.replace('/');
                this.$router.go(0);
                window.location.reload();
            },
            count1(){
                //建房申请总量
                this.getRequest("/house/building/CountAll/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.countAll = res.data.count;
                    });
            },
            showUser(){
                if (sessionStorage.getItem('tokenUser')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenUser'))
                }else if (sessionStorage.getItem('tokenCust')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenCust'))
                }
                console.log(this.loginInfo)

            },count(){
                //建房申请条数
                this.getRequest("/house/building/buildingCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.countBuilding = res.data.count;
                    });
                //出租申请条数
                this.getRequest("/house/lease/leaseCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.leaseCount = res.data.count;
                    });
                //转让申请条数
                this.getRequest("/house/lease/transferCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.transferCount = res.data.count;
                    });
            }
        },

    }
</script>

<style>
    .homeHeader{
        background: #1537ff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeHeader .title{
        font-size: 30px;
        font-family: 华文行楷;
        color: aliceblue;
    }
    .homeHeader .userInfo{
        cursor: pointer;
    }
    .el-dropdown-link img{
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-right: 18px;
    }
    .el-dropdown-link .haha{
        font-size: 20px;
        color: pink;
        position: relative;
        top: -10px;
    }
    .el-icon-s-home {
        font-size: 30px;
        position: relative;
        top: 15px;
    }
    .el-icon-message-solid{
        font-size: 30px;
        position: relative;
        top: 15px;
    }
    .el-icon-switch-button{
        font-size: 30px;
        margin-right: 18px;
        position: relative;
        top: 15px;
    }
    .ha{
        list-style: none;
        margin: 0;
        padding: 0;
        /*position: absolute;*/
        /*left: 1100px;*/
        /*top:7px;*/
        float: right;
    }
    .ha li{
        float: left;
        padding-left: 35px;
        text-align: center;
    }

</style>